<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>果然FruitC</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="renderer" content="webkit">
        <meta http-equiv="Cache-Control" content="no-siteapp" />
		<link href="${ctx }/shop/css/amazeui.min.css" rel="stylesheet" type="text/css" />
		<link href="${ctx }/shop/css/style.css" rel="stylesheet" type="text/css" />
		<style>
			.page1,.page2{
				display:none;
			}
		</style>
	</head>
	<body style="background: #efefef;">
		<header data-am-widget="header" class="am-header am-header-default sq-head ">
			<div class="am-header-left am-header-nav">
				<a href="javascript:history.back()" class="">
					<i class="am-icon-chevron-left"></i>
				</a>
			</div>
			<h1 class="am-header-title">
  	            <a  class="">我的红包</a>
            </h1>
	    </header>
	    <div style="height: 49px;"></div>
	    <div class="whitebar">
	    <div data-am-widget="tabs" class="am-tabs am-tabs-d2">
			<ul class="am-tabs-nav am-cf" style="position: fixed; top: 49px;">
			    <li class="am-active" id="page0"><a>可使用</a></li>
			    <li class="" id="page1"><a >已使用</a></li>
			    <li class="" id="page2"><a >已过期</a></li>
			</ul>
			<div style="height: 49px;"></div>
		</div>
		</div>
		<ul class="yhq page0">
		</ul>
		<ul class="yhq page1">
		</ul>
		<ul class="yhq page2">
		</ul>
	</body>
	<script src="${ctx }/shop/js/jquery-1.10.2.min.js"></script>
	<script>
		 var jsons = ${json};
		$(document).ready(function(){
			var len = jsons.length;
			for(var i =0;i<len;i++){
				var data = jsons[i];
				addData(data);
			}
			
			$(".am-tabs-nav li").click(function(){
				var self = this;
				var id= this.id;
				var $self = $(self);
				if($self.hasClass("am-active")){
					return;
				}else{
					var act = $(".am-active");
					var actid = act.attr("id");
					$("."+actid).hide();
					$("."+id).show();
					$self.addClass("am-active");
					act.removeClass("am-active");
				}
				
			});
		});
		
		function addData(data){
			var status_ = data.status_;
			var html = "";
			var dom = $(".page"+status_);
			if(status_ == 2){//过期的
				html = '<li class="yhq-gq"  style="text-align:center;position:relative">\
					   		<div class="text">\
						   		<p class="info">'+(data.desc_)+'</p>\
					   			<p class="time">失效日期:'+(data.dead_time_.substring(0,10))+'</p>\
					   		</div>\
					   		<div class="gy-pic" style="top:0px;"><img src="${ctx}/shop/images/guoqi.png"/></div>\
					   	</li>';
			}else{
				html = '<li class="yhq-pic" style="text-align:center;position:relative">\
					   		<div class="text" style="width:100%;">\
					   			<p class="info">'+(data.desc_)+'</p>\
					   			<p class="time">失效日期:'+(data.dead_time_.substring(0,10))+'</p>\
					   		</div>\
					   	</li>';
			}
			var $html = $(html);
			dom.append($html);
		}
	</script>
<%@include file="../common/jsticket.jsp"%><!--静态包含-->  
</html>
